<template>
  <div class="app-container">
    <div class="view-title">权益订单</div>
    <div>
      <el-table :data="tableDataEquirtyOrder" style="width: 100%">
        <el-table-column prop="id" label="id" width="70"> </el-table-column>
        <el-table-column prop="user_id" label="用户id" width="160">
        </el-table-column>
        <el-table-column prop="order_no" label="订单号" width="160">
        </el-table-column>
        <el-table-column prop="up_order_no" label="上游单号"> </el-table-column>
        <el-table-column prop="mobile" label="充值手机号" width="120">
        </el-table-column>

        <el-table-column prop="order_type" label="订单类型" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_type == 1" type="success"
              >话费订单</el-tag
            >
            <el-tag v-else-if="scope.row.order_type == 2" type="warning"
              >会员订单</el-tag
            >
            <el-tag v-else-if="scope.row.order_type == 3" type="danger"
              >活动订单</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="package_id" label="套餐id"> </el-table-column>
        <el-table-column prop="package_name" label="套餐名称">
        </el-table-column>
        <el-table-column prop="package_code" label="套餐编码" width="120">
        </el-table-column>
        <el-table-column prop="all_node_name" label="套餐类型" min-width="240">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.all_node_name">
              {{ scope.row.all_node_name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="package_cover_img"
          label="套餐封面图"
          width="130"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.package_cover_img"
              alt=""
              style="width: 120px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="open_status" label="开卡状态">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.open_status == 1"
              >待办理</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.open_status == 2"
              >办理中</el-tag
            >
            <el-tag type="success" v-else-if="scope.row.open_status == 3"
              >办理成功</el-tag
            >
            <el-tag type="danger" v-else-if="scope.row.open_status == 4"
              >办理失败</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="open_message" label="开卡回文" width="130">
        </el-table-column>
        <el-table-column prop="pay_type" label="支付方式">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.pay_type == 0">余额</el-tag>
            <el-tag type="success" v-else-if="scope.row.pay_type == 1"
              >微信</el-tag
            >
            <el-tag v-else-if="scope.row.pay_type == 2">支付宝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pay_status" label="支付状态">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.pay_status == 0">待支付</el-tag>
            <el-tag type="success" v-else-if="scope.row.pay_status == 11"
              >已支付</el-tag
            >
            <el-tag type="danger" v-else-if="scope.row.pay_status == 22"
              >已退款</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="operator_id" label="运营商">
          <template slot-scope="scope">
            <span v-if="scope.row.operator_id">{{
              scope.row.operator_id | getOperator
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="订单价格"> </el-table-column>
        <el-table-column prop="up_price" label="上游价格"> </el-table-column>
        <el-table-column prop="pay_at" label="支付时间"> </el-table-column>
        <el-table-column prop="wxpay_order_no" label="微信支付订单号">
        </el-table-column>
        <el-table-column prop="alipay_order_no" label="支付宝支付订单号">
        </el-table-column>
        <el-table-column prop="refund_at" label="退款时间"> </el-table-column>
        <el-table-column prop="refund_amount" label="退款金额">
        </el-table-column>
        <el-table-column prop="refund_reason" label="退款原因">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getAppQyOrdersList, deleteAppQyOrders } from "@/api/equirtyOrder";
export default {
  data() {
    return {
      tableDataEquirtyOrder: [],
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
    };
  },
  filters: {
    getOperator(val) {
      if (val == 1) {
        return "移动";
      } else if (val == 2) {
        return "联通";
      } else if (val == 3) {
        return "电信";
      } else if (val == 4) {
        return "广电";
      }
    },

    getOpenStatus(val) {
      if (val == 1) {
        return "待办理";
      } else if (val == 2) {
        return "办理中";
      } else if (val == 3) {
        return "办理成功";
      } else if (val == 4) {
        return "办理失败";
      }
    },

    getPayType(val) {
      if (val == 0) {
        return "余额";
      } else if (val == 1) {
        return "微信";
      } else if (val == 2) {
        return "支付宝";
      }
    },

    getPayStatus(val) {
      if (val == 0) {
        return "待支付";
      } else if (val == 11) {
        return "已支付";
      } else if (val == 22) {
        return "已退款";
      }
    },

    getPackageType(val) {
      if (val == 4) {
        return "话费充值";
      }
    },

    getOrderType(val) {
      if (val == 1) {
        return "话费订单";
      } else if (val == 2) {
        return "会员订单";
      } else if (val == 3) {
        return "活动订单";
      }
    },
  },
  mounted() {
    this.getAppQyOrdersList();
  },
  methods: {
    // 获取权益订单列表接口
    getAppQyOrdersList() {
      getAppQyOrdersList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataEquirtyOrder = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除接口
    deleteAppQyOrders(val) {
      deleteAppQyOrders({
        ids: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("删除成功");
          this.getAppQyOrdersList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除
    handleDelete(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteAppQyOrders(val);
        })
        .catch(() => {});
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNow = 1;
      this.getAppQyOrdersList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNow = val;
      this.getAppQyOrdersList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
